<template>
  <div class="main">
    <div class="content">
      <div class="top">
        <p class="info">小票流水号：{{shopId}}</p>
        <p class="info">购买商店：{{storeName}}</p>
      </div>
      <div class="top">
        <p class="info">购买时间：{{time}}</p>
        <p class="info">金额：{{totalPrice}}</p>
      </div>
      <div class="middle">
        <div class="line">
          <div class="index">序号</div>
          <div class="name">品名</div>
          <div class="barcode">商品码</div>
          <div class="number">数量</div>
          <div class="dealPrice">单价</div>
          <div class="aftersell_store">店铺三包</div>
          <div class="aftersell_factory">厂家三包</div>
          <div class="function">功能</div>
        </div>
        <div class="middle_content">
          <div class="line" v-for="item in items" :key="item.index">
            <div class="index">{{item.index}}</div>
            <div class="name">{{item.commodity}}</div>
            <div class="barcode">{{item.barCode}}</div>
            <div class="number">{{item.count}}</div>
            <div class="dealPrice">{{item.dealPrice}}</div>
            <div class="aftersell_store">
              ({{item.storeReturnDays}},
              {{item.storeRepairDays}},
              {{item.storeExchangeDays}})
            </div>
            <div class="aftersell_factory">
              ({{item.factoryReturnDays}},
              {{item.factoryExchangeDays}},
              {{item.factoryRepairDays}})
            </div>
            <div class="function">
              <div class="function_button" @click="return_goods(shopId, item.barCode)" >退货</div>
              <div class="function_button" @click="exchange_goods(shopId, item.barCode)" >换货</div>
              <div class="function_button" @click="repair_goods(shopId, item.barCode)" >维修</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import salesPersonService from '../../service/salesperson'
export default {
  name: 'SalesInformation',
  data () {
    return {
      shopId: 0,
      storeId: 0,
      storeName: '',
      totalPrice: '',
      time: '',
      items:[]
      // [
      //   {
      //     index: 1,
      //     name: 'A',
      //     barCode: "demoData",
      //     count: 1,
      //     dealPrice: 9.88,
      //     aftersell_store_returndays: 7,
      //     aftersell_store_exchangedays: 15,
      //     aftersell_store_repairdays: 365,
      //     aftersell_factory_returndays: 7,
      //     aftersell_factory_exchangedays: 15,
      //     aftersell_factory_repairdays: 365
      //   }
      // ]
    }
  },
  async mounted () {
    let result = await salesPersonService.searchShopInfo(this.$route.query.shopId)
    let data = result.data
    if (data === undefined || data === null || data === '') {
      alert('流水号有误')
      this.$router.push({ name: 'BeforeSales' })
    }
    this.shopId = result.data.shopId
    this.storeId = result.data.storeId
    this.storeName = result.data.storeName
    this.time = result.data.time
    this.totalPrice = result.data.totalPrice
    this.items = result.data.items
    // alert(JSON.stringify(result.data.))
  },
  methods: {
    return_goods (shop_id, barCode) {
      this.$router.push({ name: 'SalesReturn', params: {
        shopId: shop_id,
        barCode: barCode
        } })
    },
    exchange_goods (shop_id, barCode) {
      this.$router.push({ name: 'ExchangeGoods', params: {
          shopId: shop_id,
          barCode: barCode
        } })
    },
    repair_goods (shop_id, barCode) {
      this.$router.push({ name: 'RepairTheMachine', params: {
          shopId: shop_id,
          barCode: barCode
        } })
    }
  }
}
</script>

<style lang="scss" scoped>
  .main{
    width: 100%;
    height: calc(100% - 1px);
    background: #FFFFFF;
    border-top: 1px solid transparent;
    .content {
      width: 1000px;
      margin: 150px auto 0;
      .top {
        margin: 0 auto 0;
        width: 900px;
        height: 30px;
        /*border: 2px solid red;*/
        .info {
          font-size: 18px;
          float: left;
          width: 450px;
        }
      }
      .middle{
        margin: 20px auto 0;
        width: 1100px;
        height: 50px;
        /*border: 2px solid red;*/
        .line {
          width: 1100px;
          height: 30px;
          border: 2px solid black;
          overflow: hidden;
          text-align: center;
          @mixin col {
            border-right: 1px solid black;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            float: left;
          }
          .index{
            @include col;
            width: 50px;
          }
          .name{
            @include col;
            width: 200px;
          }
          .barcode{
            @include col;
            width: 200px;
          }
          .number{
            @include col;
            width: 50px;
          }
          .dealPrice{
            @include col;
            width: 100px;
          }
          .aftersell_store{
            @include col;
            width: 150px;
          }
          .aftersell_factory{
            @include col;
            width: 150px;
          }
          .function {
            @include col;
            width: 160px;
            border: 0;
            .function_button {
              float: left;
              width: 30px;
              height: 20px;
              margin: 5px 10px;
              text-align: center;
              line-height: 20px;
              border: 1px solid black;
              border-radius: 2px;
            }
          }
        }
        .middle_content{
          width: 1100px;
          max-height: 500px;
          border-bottom: 1px solid black;
          /*overflow: auto;*/
          overflow-y: auto;
          overflow-x: hidden;
        }
      }
    }
  }

</style>
